<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<%@ include file="../common/include/header.jsp"%>

<%@ page import="util.*"%>

<jsp:useBean id="photoForm" class="board.PhotoForm" scope="request"/>
<jsp:useBean id="photoboard" class="model.PhotoBoard" scope="request"/>

<div>
<table border="0" cellpadding="0" cellspacing="0" width="980px">
	<tr>
		<td style="vertical-align: top;width: 180px;background-color: #fdb73a;">
			<%@ include file="../common/include/leftmenu.jsp"%>
		</td>
		<td style="text-align: center;width: 800px; vertical-align: top;">
		
			<%@include file="logo.jsp" %>
			
			<div class="boardname">	<bean:write name="photoForm" property="pbname"/></div>
			
			<table border="0" cellpadding="0" cellspacing="0" width="700px">
				<tr>
					<td style="font-weight: bold;">
						<bean:write name="photoForm" property="pbtitle"/>
					</td>
				</tr>
				<tr height="10px"></tr>
				<tr>
					<td style="border: 1px dotted #bbbbbb;">
						<div style="text-align: right;">
							<span style="font: 8pt;">
								<logic:notEqual name="photoForm" property="rownum" value="0">
									[<bean:write name="photoForm" property="rownum"/>]
								</logic:notEqual>
							</span>&nbsp;
							<span>
								<a href="javascript:;" onmousedown="popmenu1('<bean:write name="photoForm" property="mid"/>')" style="color: #2F4F4F;">
									<logic:notEmpty name="photoForm" property="nickName">
										<bean:write name="photoForm" property="nickName"/>
									</logic:notEmpty>
									<logic:empty name="photoForm" property="nickName">
										<bean:write name="photoForm" property="mid"/>
									</logic:empty>
								</a>
							</span>&nbsp;
							<span style="font-size: 7pt;color: #aaaaaa;">
								<%=photoForm.getPbdate().substring(0, 19)%>
							</span>&nbsp;
						</div>
						<div style="text-align: right;">
							<logic:notEmpty name="photoForm" property="pbofn">
								<bean:write name="photoForm" property="pbofn"/>
								<logic:greaterEqual name="photoForm" property="pbfsize" value="1024">
									<font style="font-size: 7pt;">(<%=Integer.parseInt(photoForm.getPbfsize())/1024%> KByte)</font>
								</logic:greaterEqual>
								<logic:lessThan name="photoForm" property="pbfsize" value="1024">
									<font style="font-size: 7pt;">(<bean:write name="photoForm" property="pbfsize"/> Byte)</font>
								</logic:lessThan>
							</logic:notEmpty>&nbsp;
							<logic:empty name="photoForm" property="pbofn">
								&nbsp;
							</logic:empty>
						</div>
						<div style="background: #ffffff;padding:10px;">
							<img src="<%=path%>/uploadfiles/<%=photoForm.getPbsfn()%>" id="photo" alt=""/>
						</div>
						<div id="contents" style="background: #ffffff;text-align: left;padding:10px;">
							<html:hidden name="photoForm" property="pbcontent"/>
						</div>
					</td>
				</tr>
			</table>
			<table cellpadding="0" cellspacing="0" width="700px">
				<tr>
					<td>
						<a id="toggleButton" href="javascript:toggleComment();" onfocus="blur()">▲</a>
					</td>
				</tr>
			</table>
			<table cellpadding="0" cellspacing="0" width="700px">
				<tr>
					<td id="commentDIV" style="width: 660px;background: #ffffff;border: 1px dotted #bbbbbb;padding: 5px;"></td>
				</tr>
				<tr>
					<td id="commentWrite" style="width: 660px;background: #ffffff;border: 1px dotted #bbbbbb;padding: 5px;vertical-align: top;">
						<table width="100%">
							<tr>
								<td style="width: 80px;vertical-align: middle;text-align: center;">
									<logic:greaterThan name="photoForm" property="cono" value="10">
										<bean:write name="user" property="mcnick"/>
									</logic:greaterThan>
									<logic:lessEqual name="photoForm" property="cono" value="10">
										<bean:write name="user" property="mid"/>
									</logic:lessEqual>
								</td>
								<td>
									<textarea rows="3" cols="70" style="width: 470px;" id="commentText"></textarea>
									<input type="button" value="comment" style="background: #ffffff;border: 1px solid #bbbbbb;height: 50px;" onclick="commentCheck(<bean:write name="photoForm" property="pbno"/>)"/>
								</td>
							</tr>
						</table>			
					</td>
				</tr>
			</table>
			<br/>
			<table border="0" cellpadding="0" cellspacing="0" width="700px">
				<tr id="nextTr">
					<td style="text-align: left;padding-left: 50px;border-top: 1px dotted #dddddd;border-bottom: 1px dotted #dddddd;">
						<a href="javascript:getBoard('photoboard.do?method=photoView&rownum=<%=Integer.parseInt(photoForm.getRownum())-1%>&pbno=', '<bean:write name="photoForm" property="nextNumTitle[0]"/>')" id="next">[다음글]&nbsp;<bean:write name="photoForm" property="nextNumTitle[1]"/></a>
					</td>
				</tr>
				<tr id="frontTr">
					<td style="text-align: left;padding-left: 50px;border-top: 1px dotted #dddddd;border-bottom: 1px dotted #dddddd;">
						<a href="javascript:getBoard('photoboard.do?method=photoView&rownum=<%=Integer.parseInt(photoForm.getRownum())+1%>&pbno=', '<bean:write name="photoForm" property="frontNumTitle[0]"/>')" id="front">[이전글]&nbsp;<bean:write name="photoForm" property="frontNumTitle[1]"/></a>
					</td>
				</tr>
			</table>
			<table border="0" cellpadding="0" cellspacing="0" width="700px">
				<tr>
					<td style="text-align: right;">
						<a href="javascript:getBoard('photoboard.do?method=photoUpdateForm&rownum=<bean:write name="photoForm" property="rownum"/>&pbno=<bean:write name="photoForm" property="pbno"/>&pbname=','<bean:write name="photoForm" property="pbname"/>')" id="update"><img src="<%=imagePath %>icon_update.jpg"/></a>
						<a href="javascript:getBoard('photoboard.do?method=photoDelete&currentPage=<bean:write name="pager" property="currentPage"/>&pbno=<bean:write name="photoForm" property="pbno"/>&cono=<bean:write name="photoForm" property="cono"/>&pbname=', '<bean:write name="photoForm" property="pbname"/>')" id="remove"><img src="<%=imagePath %>icon_delete.jpg"/></a>
						<a href="javascript:getBoard('photoboard.do?method=photoList&currentPage=<bean:write name="pager" property="currentPage"/>&cono=<bean:write name="photoForm" property="cono"/>&pbname=', '<bean:write name="photoForm" property="pbname"/>')"><img src="<%=imagePath %>icon_list.jpg"/></a>
					</td>
				</tr>
		</td>
	</tr>
</table>
</div>

<%@ include file="../common/include/footer.jsp" %>

<script type="text/javascript">
<!--
	if(<%=photoForm.getRownum()%>==0){
		document.getElementById("frontTr").style.display = "none";
		document.getElementById("nextTr").style.display = "none";
	}
	
	if(<%=photoForm.getViewHeight()%>!=0){
		document.images.photo.width = <%=photoForm.getViewWidth()%>
		document.images.photo.height = <%=photoForm.getViewHeight()%>
	}else{
		var image = new Image();
		image.src = document.getElementById("photo").src;
		var setSize = 500;
		var widthSize = image.width;
		var heightSize = image.height;
		if(widthSize > setSize || heightSize > setSize){
			if(widthSize > heightSize){
				document.images.photo.width = setSize;
				document.images.photo.height = heightSize * setSize / widthSize;
			}else{
				document.images.photo.width = widthSize * setSize / heightSize;
				document.images.photo.height = setSize;
			}
		}
	}
	
	//로그인ID와 작성자ID가 다를경우 수정,삭제못하게 숨기는 스크립트///////////////////
	var loginID = "<%=user.getMid()%>";
	var writerID = "<%=photoForm.getMid()%>";
	var loginLevel = "<%=user.getUserInfo().getLvno()%>";
	if(loginID!=writerID & loginLevel<8){
		document.getElementById("update").style.display = "none";
		document.getElementById("remove").style.display = "none";
	}
	
	//이전글이 없을 시 화면에 표시되지 않게하는 스크립트/////////////////////////////
	var front = "<%=photoForm.getFrontNumTitle().get(0)%>";
	if(front==""){
		document.getElementById("frontTr").style.display = "none";
	}
	
	//다음글이 없을 시 화면에 표시되지 않게하는 스크립트/////////////////////////////
	var next = "<%=photoForm.getNextNumTitle().get(0)%>";
	if(next==""){
		document.getElementById("nextTr").style.display = "none";
	}
	
	//코멘트에 대한 스크립트///////////////////////////////////////////
	var xmlHttp;

	window.attachEvent("onload",startRequest);

	function createXMLHttpRequest() {
	    if (window.ActiveXObject) {
	        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	    } 
	    else if (window.XMLHttpRequest) {
	        xmlHttp = new XMLHttpRequest();
	    }
	}
	
	function startRequest() {
		var url = "<%=path%>/board/photocomment.do?method=getCommmentList";
		var pbno = "pbno=<%=photoForm.getPbno() %>";
		var cono = "&cono=<%=photoForm.getCono() %>";
		createXMLHttpRequest();
	    xmlHttp.open("POST", url, true);
	    xmlHttp.onreadystatechange = handleStateChange;
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    xmlHttp.send(pbno + cono);
	}
	
	function handleStateChange() {
	    if(xmlHttp.readyState == 4) {
	    	if(xmlHttp.status == 200){
	    		parseResponse();	       
			}	           
	    }
	}
	
	function parseResponse(){

		var xmlDoc = xmlHttp.responseXML;

		var comment = xmlDoc.getElementsByTagName('comment');
		
		for(var i=0;i<comment.length;i++){
			
			var pcno = comment[i].getElementsByTagName('pcno')[0].firstChild.nodeValue;
			var pbno = comment[i].getElementsByTagName('pbno')[0].firstChild.nodeValue;
			var mid = comment[i].getElementsByTagName('mid')[0].firstChild.nodeValue;
			var mcnick = comment[i].getElementsByTagName('mcnick')[0].firstChild.nodeValue;
			var pccomment = comment[i].getElementsByTagName('pccomment')[0].firstChild.nodeValue;
			var pcdate = comment[i].getElementsByTagName('pcdate')[0].firstChild.nodeValue;
			var iconno = comment[i].getElementsByTagName('iconno')[0].firstChild.nodeValue;
			
			var newShell = createCommentDiv(pcno,pbno,mid,mcnick,pccomment,pcdate,iconno);			

			commentDIV.appendChild(newShell);
			
		}
	
		xmlHttp = null;
	}
	
	//코멘트 div 생성///////////////////////////////////////////////
	function createCommentDiv(fcno,fbno,mid,mcnick,fccomment,fcdate,iconno){
	
		var shell = document.createElement('div');
		shell.style.textAlign = "left";
		shell.style.width = "660";

		var _table = document.createElement('table');
		var _tbody = document.createElement('tbody');
		var _tr = document.createElement('tr');
		
		var _mid = document.createElement('td');
		_mid.innerHTML = '<a href="javascript:;" onmousedown="popmenu1(\''+mid+'\')">'+mcnick+'</a>';
//		_mcnick.appendChild(document.createTextNode(mcnick));
//		_mcnick.onmousedown = popmenu1;
//		_mcnick.onmouseover = _mcnick.style.cursor = "hand";
//		_mid.appendChild(_mcnick);
		_mid.style.width = "120";
		_mid.className = 'commentStyle';
		_mid.style.textAlign = 'center';
		_mid.name = mid;
		
		var _fccomment = document.createElement('td');
		_fccomment.appendChild(document.createTextNode(fccomment));		
		_fccomment.style.width = "520";
		_fccomment.className = 'commentStyle';
		
		var _fcdate = document.createElement('span');
		_fcdate.appendChild(document.createTextNode('  ['+fcdate+']'));
		_fcdate.style.fontSize = '7pt';
		_fcdate.style.color = '#999999';
		
		var _deleteButton = document.createElement('td');
		if(mid=="<%=user.getMid()%>"||<%=user.getUserInfo().getLvno() %>>7){
			var buttonBox = document.createElement('a');
			buttonBox.appendChild(document.createTextNode("x"));
			buttonBox.style.width = "10";
			buttonBox.style.height = "10";
			buttonBox.style.color = "red";
			buttonBox.href="javascript:deleteComment("+fcno+");";
			
			_deleteButton.appendChild(buttonBox);
		}
		
		_tr.appendChild(_mid);
		_tr.appendChild(_fccomment);
		_fccomment.appendChild(_fcdate);
		_tr.appendChild(_deleteButton);
		
		_tbody.appendChild(_tr);
		_table.appendChild(_tbody);
		
		shell.appendChild(_table);
		
		shell.name = fcno;
		
		
		return shell;
	}
	
	//코멘트 제거부분/////////////////////////////////////////////
	var removingTarget;
	
	function deleteComment(pcno){
		var cmts = commentDIV.getElementsByTagName('div');
		
		for(var i=0;i<cmts.length;i++){
			if(cmts[i].name==pcno) {
				if(cmts[i].childNodes[0].getElementsByTagName('td')[0].name=="<%=user.getMid() %>" || <%=user.getUserInfo().getLvno()%>>7){
					var sure = confirm("코멘트를 삭제하시겠습니까?");
					if(sure==true){
						procedeRemove(pcno);
						removingTarget = cmts[i];
					}
				} else { 
					alert("본인의 게시물이 아닙니다!!");
					return;
				}
			}
		}		
	}
	
	function procedeRemove(pcno){
		var url = "<%=path%>/board/photocomment.do?method=photoCmtDelete";
		var _pcno = "pcno="+pcno;		
		
		createXMLHttpRequest();
	    xmlHttp.open("POST", url, true);
	    xmlHttp.onreadystatechange = removeComment;
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    xmlHttp.send(_pcno);	
	}
	
	function removeComment(){
	    if(xmlHttp.readyState == 4) {
	    	if(xmlHttp.status == 200){
	    		if(xmlHttp.responseText=="removed"){
					var _parent = removingTarget.parentNode;
					_parent.removeChild(removingTarget);
				} else {
					alert("실패");
				}
			}	           
	    }
	}
	
	//코멘트 추가부분/////////////////////////////////////////////
	 function commentCheck(pbno){
	  	var comment = document.getElementById('commentText').value.replace(/\/s/g,"");;
	  	if(comment.length>4) commentSubmit(pbno);
	  	else {
	   		alert("코멘트는 최소 5자 이상 입력하셔야 합니다.");
	   		document.getElementById('commentText').focus();
	   		return false;
	  	}
	 }
	
	function commentSubmit(pbno){
		
		var url = "<%=path%>/board/photocomment.do?method=photoCmtInsert";
		var _pbno = "pbno="+pbno;		
		var comment = escape(encodeURIComponent(document.getElementById('commentText').value));
		var _mid = "&mid=<%=user.getMid() %>";
		var _comment = "&pccomment="+comment;
		var _cono = "&cono=<%=photoForm.getCono() %>";
		
		var data = _pbno+_mid+_comment+_cono;
		
		createXMLHttpRequest();
	    xmlHttp.open("POST", url, true);
	    xmlHttp.onreadystatechange = addComment;
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    xmlHttp.send(data);
	}
	
	function addComment() {
	    if(xmlHttp.readyState == 4) {
	    	if(xmlHttp.status == 200){
	    		setCommentTable();	       
			}	           
	    }
	}
	
	function setCommentTable(){
		var xmlDoc = xmlHttp.responseXML;

		var comment = xmlDoc.getElementsByTagName('comment');
		
		var pcno = comment[0].getElementsByTagName('pcno')[0].firstChild.nodeValue;
		var pbno = comment[0].getElementsByTagName('pbno')[0].firstChild.nodeValue;
		var mid = comment[0].getElementsByTagName('mid')[0].firstChild.nodeValue;
		var mcnick = comment[0].getElementsByTagName('mcnick')[0].firstChild.nodeValue;
		var pccomment = comment[0].getElementsByTagName('pccomment')[0].firstChild.nodeValue;
		var pcdate = comment[0].getElementsByTagName('pcdate')[0].firstChild.nodeValue;
		var iconno = comment[0].getElementsByTagName('iconno')[0].firstChild.nodeValue;
			
		var newShell = createCommentDiv(pcno,pbno,mid,mcnick,pccomment,pcdate,iconno);			
		
		commentDIV.appendChild(newShell);
		document.getElementById('commentText').value = "";
		xmlHttp = null;
	}
</script>
<script type="text/javascript">
	//게시물 내용 태그 처리부분////////////////////////////////////////////////////
	window.attachEvent("onload",convert);
	
	function convert(){
		var content = document.getElementById('pbcontent').value;
		
		content = content.replace(/&lt;/g,"<");
		content = content.replace(/&gt;/g,">");
		content = content.replace(/&amp;/g,"&");
		content = content.replace(/&nbsp;/g," ");
		content = content.replace(/&quot;/g,"\"");

		document.getElementById('contents').innerHTML = content;
	}
	
	function toggleComment(){
		if(commentDIV.style.display==""){
			commentDIV.style.display = "none";
			toggleButton.innerText = "▼"
		}else {			
			commentDIV.style.display = "";
			toggleButton.innerText = "▲"
		}		
	}
</script>